<template>
  <div class="dashboard-container">
    <!-- 帆软报表 - 库存优化 -->
    <el-card shadow="hover" class="fanruan-card">
      <template #header>
        <div class="chart-header">
          <span class="chart-title">📊 库存优化分析</span>
          <div class="header-actions">
            <el-button 
              type="success" 
              size="small" 
              @click="loadReport">
              加载报表
            </el-button>
            <el-button 
              type="primary" 
              size="small" 
              @click="openFanruanInNewTab">
              新窗口打开
            </el-button>
          </div>
        </div>
      </template>
      <div class="fanruan-iframe-container">
        <iframe 
          ref="fanruanIframe"
          :src="currentUrl" 
          frameborder="0" 
          class="fanruan-iframe"
          @load="handleIframeLoad"
          @error="handleIframeError">
        </iframe>
      </div>
      </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// iframe引用
const fanruanIframe = ref(null);

// 帆软报表URL（使用本机IP，支持外部访问）
const fanruanReportUrl = ref('http://10.223.9.4:8075/webroot/decision/view/duchamp?viewlet=%E5%BA%93%E5%AD%98%E4%BC%98%E5%8C%96%2F%E5%BA%93%E5%AD%98%E4%BC%98%E5%8C%96.fvs&page_number=1&__bypass__=true');

// 帆软登录页URL
const fanruanLoginUrl = ref('http://10.223.9.4:8075/webroot/decision');

// 当前显示的URL（默认显示登录页）
const currentUrl = ref(fanruanLoginUrl.value);

/**
 * 加载报表（点击按钮后加载）
 */
const loadReport = () => {
  ElMessage.info('正在加载帆软报表...');
  currentUrl.value = fanruanReportUrl.value;
  
  // 刷新iframe
  if (fanruanIframe.value) {
    fanruanIframe.value.src = fanruanReportUrl.value;
  }
};

/**
 * 在新窗口打开帆软报表
 */
const openFanruanInNewTab = () => {
  window.open(fanruanReportUrl.value, '_blank');
};

/**
 * iframe加载完成
 */
const handleIframeLoad = () => {
  console.log('✅ 帆软报表加载成功');
};

/**
 * iframe加载失败
 */
const handleIframeError = () => {
  console.error('❌ 帆软报表加载失败');
  ElMessage.error('帆软报表加载失败，请检查帆软服务是否正常运行');
};


/**
 * 组件挂载
 */
onMounted(() => {
  console.log('📊 帆软报表页面初始化...');
});
</script>

<style scoped lang="less">
.dashboard-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 60px);
  
  // 帆软报表卡片
  .fanruan-card {
      border-radius: 12px;
      
      :deep(.el-card__header) {
        padding: 15px 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-bottom: none;
      
      .chart-header {
    display: flex;
        justify-content: space-between;
        align-items: center;
        
        .chart-title {
          font-size: 18px;
          font-weight: bold;
          color: white;
        }
        
        .header-actions {
          display: flex;
          gap: 10px;
        }
      }
    }
    
    :deep(.el-card__body) {
      padding: 0;
    }
    
    .fanruan-iframe-container {
      width: 100%;
      height: calc(100vh - 120px);
      overflow: hidden;
      
      .fanruan-iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
      }
    }
  }
}
</style>
